<template>
	<div v-if="visible" class="table-config-dialog">
		<el-dialog v-loading="loading" :title="$t('formLabel.tableSettings')" :visible.sync="visible" :center="false"
			custom-class="table-config-dialog-content" :show-close="false" :close-on-click-modal="false"
			:close-on-press-escape="false">
			<el-tabs ref="qtable" tab-position="left" @tab-click="settingDialogTabsClick">
				<el-tab-pane :label="$t('formLabel.leftFixed')">
					<el-transfer v-model="settingDialogData.leftFixed.value" :data="settingDialogData.leftFixed.data"
						:titles="[$t('formLabel.noFixed'), $t('formLabel.leftFixed')]" target-order="push"
						@change="selectFixedChange($event, 'left')" />
				</el-tab-pane>
				<el-tab-pane :label="$t('formLabel.rightFixed')">
					<el-transfer v-model="settingDialogData.rightFixed.value" :data="settingDialogData.rightFixed.data"
						:titles="[$t('formLabel.noFixed'), $t('formLabel.rightFixed')]" target-order="push"
						@change="selectFixedChange($event, 'right')" />
				</el-tab-pane>
				<el-tab-pane :label="$t('formLabel.middleSliding')">
					<el-transfer v-model="settingDialogData.center.value" :data="settingDialogData.center.data"
						:titles="[$t('formLabel.hidden'), $t('formLabel.show')]" target-order="push"
						@change="selectFixedChange($event, 'center')" />
				</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="handleClickOk">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { updateTableHeader } from '@/api/table-config'
export default {
	// @change (obj: tableConfig) 修改成功后回调
	// @close 关闭dialog
	// visible 显示/关闭 组件
	// tableConfig 表头数据
	// eslint-disable-next-line vue/require-prop-types
	props: ['visible', 'tableConfig'],
	data() {
		return {
			loading: false,
			settingDialogData: null,
			branchId: this.$store.getters.branchId, //是否是门店
			companyId: this.$store.getters.companyId //是否公司
		}
	},
	watch: {
		visible: function (val) {
			if (val) {
				this.init()
			} else {
				this.initData()
			}
		}
	},
	mounted() {
		this.init()
	},
	beforeDestroy() { },
	methods: {
		handleClickOk() {
			var data = JSON.parse(
				JSON.stringify(this.settingDialogData.temporaryData)
			)
			this.saveTableHeader(data)
		},
		saveTableHeader(data) {
			this.loading = true
			updateTableHeader(data)
				.then(res => {
					if (res.code === 200) {
						this.$message({
							message: '修改成功!',
							type: 'success'
						})
						var tableConfig = null
						try {
							tableConfig = JSON.parse(
								JSON.stringify(this.settingDialogData.temporaryData)
							)
							// eslint-disable-next-line no-empty
						} catch (error) { }
						this.$emit('change', tableConfig)
						this.closeDialog()
					}
				})
				.finally(() => {
					this.loading = false
				})
		},
		settingDialogTabsClick() {
			this.checkSettingDialogData()
		},
		selectFixedChange(e, type) {
			var data = this.settingDialogData.temporaryData
			// console.log(e, type);
			if (type === 'left') {
				for (let index = 0; index < data.length; index++) {
					const item = data[index]
					// console.log(index + ' : ' + item.label + '\t' + item.fixed + '\t' + item.show);
					if (e.indexOf(index) === -1) {
						if (item.fixed === 'left') item.fixed = false
					} else {
						item.fixed = 'left'
					}
				}
			} else if (type === 'right') {
				for (let index = 0; index < data.length; index++) {
					const item = data[index]
					if (e.indexOf(index) === -1) {
						if (item.fixed === 'right') item.fixed = false
					} else {
						item.fixed = 'right'
					}
				}
			} else {
				for (let index = 0; index < data.length; index++) {
					const item = data[index]
					console.log(item, '-----')
					if (e.indexOf(index) === -1) {
						if (item.fixed === false) item.show = false
					} else {
						item.show = true
						item.fixed = false
					}
				}
			}
		},
		checkSettingDialogData() {
			var data = this.settingDialogData.temporaryData
			var keyLilst = []
			this.tableConfig.forEach(item => {
				keyLilst.push(item.key)
			})
			this.settingDialogData.leftFixed = {
				value: [],
				data: []
			}
			this.settingDialogData.rightFixed = {
				value: [],
				data: []
			}
			this.settingDialogData.center = {
				value: [],
				data: []
			}
			for (let index = 0; index < data.length; index++) {
				const item = data[index]
				var tar = { key: index, label: item.label, disabled: false }
				if (item.show && (this.branchId ? (item.key !== 'branchName' && item.key !== 'companyName') : (!this.branchId && this.companyId) ? item.key !== 'companyName' : item.key)) this.settingDialogData.leftFixed.data.push(tar)
				if (item.fixed === 'left') {
					if (item.show) this.settingDialogData.leftFixed.value.push(index)
				} else {
					if (item.show && (this.branchId ? (item.key !== 'branchName' && item.key !== 'companyName') : (!this.branchId && this.companyId) ? item.key !== 'companyName' : item.key)) this.settingDialogData.rightFixed.data.push(tar)
					if (item.fixed === 'right') {
						if (item.show) this.settingDialogData.rightFixed.value.push(index)
					} else {
						// 中间滑动隐藏 
						if (this.branchId ? (item.key !== 'branchName' && item.key !== 'companyName') : (!this.branchId && this.companyId) ? item.key !== 'companyName' : item.key) this.settingDialogData.center.data.push(tar)
						// 中间滑动显示
						if (item.show) {
							this.settingDialogData.center.value.push(index)
						}
					}
				}
			}
		},
		init() {
			this.initData()
			this.settingDialogData.temporaryData = JSON.parse(
				JSON.stringify(this.tableConfig)
			)
			this.checkSettingDialogData()
		},
		initData() {
			this.settingDialogData = {
				temporaryData: [],
				leftFixed: {
					value: [],
					data: []
				},
				center: {
					value: [],
					data: []
				},
				rightFixed: {
					value: [],
					data: []
				}
			}
		},
		closeDialog() {
			this.$emit('close')
		}
	}
}
</script>
<style lang="scss">
.table-config-dialog {
	.table-config-dialog-content {
		min-width: 800px;

		.el-dialog__header {
			border-bottom: 1px solid #e4e4e4;
			text-align: left;
		}

		.el-dialog__footer {
			border-top: 1px solid #e4e4e4;
			text-align: right;
		}
	}
}
</style>
